<template>
  <div id="app">
    <div class="left">
      <left @sendDate="sendDateHeadler"></left>
    </div>
    <div class="right">
      <div class="top">
        <topp></topp>
      </div>
      <div class="content">
        <component :is="content" @dd="jiess"></component>
      </div>
      <div class="bottom"></div>
    </div>
  </div>
</template>

<script>
import left from "./components/left.vue";
import topp from "./components/topp.vue";
import indexx from "./page/indexx.vue";
import soures from "./page/soures.vue";
import classes from "./page/classes.vue";
import exam from "./page/exam.vue";
import teacher from "./page/teacher.vue";

export default {
  name: "App",
  components: {
    left,
    topp,
    indexx,
    soures,
    classes,
    exam,
    teacher,
  },
  data() {
    return {
      content: "indexx",
    };
  },

  methods: {
    sendDateHeadler(data) {
      this.content = data;
      console.log(data);
    },
    jiess(data1) {
      console.log(data1);
      this.content = data1;
    },
  },

  /*  methods: {
    sendDateHeadler(data) {
      this.content = data;
      // console.log(data);
    },
  }, */
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#app {
  display: flex;
  box-sizing: border-box;
}
#app .left {
  width: 200px;
  height: 100vh;
  background-color: #2a303e;
  box-sizing: border-box;
}
#app .left h1 {
  margin-top: 0;
}
#app .right {
  flex: 1;
  height: 100vh;
  background-color: #eeeff3;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: center;
}
#app .top,
.bottom {
  height: 70px;
  background-color: #3d4a5d;
  box-sizing: border-box;
}
#app .content {
  height: 100%;
  background-color: #f5f5f5;
  box-sizing: border-box;
  overflow: auto;
}
#app .top {
  display: flex;
  flex-direction: row-reverse;
}
</style>
